<template>
  <div>
    <!-- 导航栏 -->

    <van-nav-bar
      style="color: #fff"
      title="文章详情"
      @click-left="$router.back()"
      left-arrow
    />

    <!-- /导航栏 -->

    <div class="container">
      <div class="article-content">
        <h1 class="title">{{ articleList.title }}</h1>
        <van-cell center class="user-info">
          <div slot="title" class="name">{{ articleList.author }}</div>
          <van-image
            slot="icon"
            class="avatar"
            round
            fit="cover"
            :src="articleList.avatar"
          />
          <!-- <img :src="articleList.avatar" alt="" /> -->
          <div slot="label" class="pubdate">
            {{ articleList.time | formatDate }}
          </div>
          <van-button
            class="follow-btn"
            type="default"
            icon="plus"
            round
            size="small"
            >已关注</van-button
          >
        </van-cell>
        <div class="markdown-body">{{ articleList.content }}</div>
        <!-- 文章评论列表 -->
        <van-cell
          class="comment-item"
          v-for="(item2, i) in articleList2"
          :key="item2._id"
        >
          <van-image
            slot="icon"
            class="avatar"
            round
            fit="cover"
            :src="item2.info.avatar"
          />
          <div slot="title">
            <div class="title-w">
              <div class="name">{{ item2.info.nickname }}</div>
              <div class="like-w">
                <van-icon
                  :style="{
                    color:
                      articleList2[i].is_like == false ? '#777' : '#ef092c',
                  }"
                  name="good-job"
                  @click="GiveALike4(i)"
                />
                <span class="like-count">{{
                  item2.like_count == 0 ? "" : item2.like_count
                }}</span>
              </div>
            </div>
            <div class="content">{{ item2.content }}</div>
            <div class="info">
              <span class="pubdate">{{ articleList.time | formatDate }}</span>
              <van-button
                class="reply-btn"
                round
                size="mini"
                @click="CommentBack(i)"
                >{{
                  item2.reply_num == 0 ? "" : item2.reply_num
                }}
                回复</van-button
              >
              <van-button
                class="reply-btn"
                round
                size="mini"
                @click="replyList(i)"
                >全部评论</van-button
              >
            </div>
          </div>
        </van-cell>
        <!-- /文章评论列表 -->
      </div>
    </div>
    <!-- /发布评论 -->
    <div class="article-bottom">
      <van-button class="comment-btn" type="default" round size="small"
        ><van-cell class="qinglun" @click="showPopup"
          >写评论</van-cell
        ></van-button
      >

      <van-icon name="comment-o" color="#777" />
      <van-icon
        name="star"
        :style="{ color: is_fav == false ? '#777' : '#000000' }"
        @click="collect1"
      />
      <van-icon
        :style="{ color: is_like == false ? '#777' : '#ef092c' }"
        name="good-job"
        @click="GiveALike"
      />
      <van-icon name="share" color="#777777"></van-icon>
    </div>
    <!-- 评论回复 -->

    <van-popup v-model="show" position="bottom">
      <div class="post-comment">
        <van-field
          v-model="value"
          rows="4"
          autosize
          type="textarea"
          maxlength="1000"
          placeholder="请输入留言"
          show-word-limit
        />

        <div style="width: 100%">
          <van-button size="large" type="primary" @click="reply"
            >回复</van-button
          >
        </div>
      </div>
    </van-popup>
    <van-popup v-model="show2" position="bottom">
      <div class="post-comment">
        <van-field
          v-model="value"
          rows="4"
          autosize
          type="textarea"
          maxlength="1000"
          placeholder="请输入留言"
          show-word-limit
        />

        <div style="width: 100%">
          <van-button size="large" type="primary" @click="reply2"
            >回复评论</van-button
          >
        </div>
      </div>
    </van-popup>
    <!-- 二级评论列表 -->
    <van-popup
      v-model="show3"
      closeable
      position="bottom"
      :style="{ height: '80%' }"
    >
      <h3>全部评论</h3>
      <van-cell
        class="comment-item"
        v-for="(item3, i) in getReplyList"
        :key="item3._id"
      >
        <van-image
          slot="icon"
          class="avatar"
          round
          fit="cover"
          :src="item3.info.avatar"
        />
        <div slot="title">
          <div class="title-w">
            <div class="name">{{ item3.info.nickname }}</div>
            <div class="like-w"></div>
          </div>
          <div class="content">{{ item3.content }}</div>
          <div class="info">
            <span class="pubdate">{{ articleList.time | formatDate }}</span>
          </div>
        </div>
      </van-cell>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      articleList: [],
      articleList2: [],

      show2: false,
      show3: false,
      value: "",
      article_id: "",
      uid: "",
      user_id: "",
      is_fav: "",
      is_like: "",
      like: "",

      reply_comment_id: "",
      // 二级评论数据
      getReplyList: [],
    };
  },
  mounted() {
    this.article_id = this.$route.query.article_id;
    this.user_id = this.$route.query.user_id;
    this.uid = window.localStorage.getItem("uid");
    this.postArticle();
    // console.log(this.article_id);
  },

  methods: {
    showPopup() {
      this.show = true;
    },
    // 详情
    async postArticle() {
      const { data: res } = await this.axios({
        method: "POST",
        url: "/api/get_article_detail",
        params: { article_id: this.article_id, user_id: this.uid },
      });
      if (res.code == 0) {
        this.articleList = res.data;
        this.is_fav = res.data.is_fav;
        this.is_like = res.data.is_like;
      }
      this.acommentlist();
      console.log(res);
      console.log(this.like);
      // console.log(this.articleList);
    },
    // 点赞总
    GiveALike() {
      if (this.articleList.is_like) {
        this.CancelThumb();
      } else {
        this.GiveALike1();
      }
    },
    // 点赞
    async GiveALike1() {
      this.postArticle();
      const { data: res } = await this.axios({
        method: "POST",
        url: "/api/like",
        params: { article_id: this.article_id, user_id: this.uid },
      });
      console.log(res);
    },
    // 取消点赞
    async CancelThumb() {
      const { data: res } = await this.axios({
        method: "POST",
        url: "/api/unlike",
        params: { article_id: this.article_id, user_id: this.uid },
      });
      console.log(res);
      this.postArticle();
    },
    // 加载列表
    async acommentlist() {
      const { data: res } = await this.axios.post("/api/get_comment_list", {
        article_id: this.article_id,
        skip: 0,
        limit: 5,
        user_id: this.uid,
      });
      // console.log(res);
      this.articleList2 = res.data;
      console.log(this.articleList2);

      // console.log(this.comment_id);
    },
    // 评论点赞
    GiveALike4(i) {
      if (this.articleList2[i].is_like) {
        this.GiveALike3(i);
      } else {
        this.GiveALike2(i);
      }
    },
    async GiveALike2(i) {
      const { data: res } = await this.axios({
        method: "POST",
        url: "/api/comment_like",
        params: { user_id: this.uid, comment_id: this.articleList2[i]._id },
      });
      this.acommentlist();
      console.log(res);
    },
    // 取消评论点赞
    async GiveALike3(i) {
      const { data: res } = await this.axios({
        method: "POST",
        url: "/api/comment_unlike",
        params: { user_id: this.uid, comment_id: this.articleList2[i]._id },
      });
      // this.acommentlist();
      this.acommentlist();
      console.log(res);
      // console.log(this.articleList2[i]);
      // console.log(this.uid);
      // console.log(this.comment_id);
    },
    // 收藏总管理
    collect1() {
      if (this.articleList.is_fav) {
        this.cancelCollection();
      } else {
        this.collect();
      }
    },
    // 收藏按钮
    async collect() {
      const { data: res } = await this.axios({
        method: "POST",
        url: "/api/add_fav",
        params: { user_id: this.uid, article_id: this.article_id },
      });
      console.log(res);

      this.postArticle();
    },
    // 取消收藏
    async cancelCollection() {
      const { data: res } = await this.axios({
        method: "POST",
        url: "/api/remove_fav",
        params: { user_id: this.uid, article_id: this.article_id },
      });
      console.log(res);

      this.postArticle();
    },
    // 回复
    async reply() {
      const { data: res } = await this.axios({
        method: "POST",
        url: "/api/add_comment",
        params: {
          user_id: this.uid,
          article_id: this.article_id,
          comment_type: 0,
          content: this.value,
        },
      });
      this.acommentlist();
      console.log(res);
    },
    // 评论回复
    CommentBack(i) {
      this.reply_comment_id = this.articleList2[i]._id;
      this.show2 = true;
    },
    async reply2() {
      const { data: res } = await this.axios({
        method: "POST",
        url: "/api/add_comment",
        params: {
          user_id: this.uid,
          article_id: this.article_id,
          reply_comment_id: this.reply_comment_id,
          comment_type: 1,
          content: this.value,
        },
      });
      this.acommentlist();
      console.log(res);
    },
    async replyList(i) {
      this.show3 = true;
      const { data: res } = await this.axios.post("/api/get_reply_list", {
        article_id: this.article_id,
        skip: 0,
        limit: 5,
        reply_comment_id: this.articleList2[i]._id,
      });
      console.log(res);
      this.getReplyList = res.data;
    },
  },
  // 过滤器
  filters: {
    formatDate(value) {
      // 时间戳转换日期格式方法
      if (value == null) {
        return "";
      } else {
        let date = new Date(value);
        let y = date.getFullYear(); // 年
        let MM = date.getMonth() + 1; // 月
        MM = MM < 10 ? "0" + MM : MM;
        let d = date.getDate(); // 日
        d = d < 10 ? "0" + d : d;
        // let h = date.getHours(); // 时
        // h = h < 10 ? "0" + h : h;
        // let m = date.getMinutes(); // 分
        // m = m < 10 ? "0" + m : m;
        // let s = date.getSeconds(); // 秒
        // s = s < 10 ? "0" + s : s;
        // return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
        return y + "-" + MM + "-" + d;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.qinglun {
  padding: 10px;
}
.van-nav-bar {
  background-color: #4fc08d;
}
.article-content {
  overflow-y: auto;
  padding-bottom: 44px;
  .title {
    font-size: 20px;
    color: #3a3a3a;
    padding: 24px 20px 18px;
    background-color: #fff;
    margin: 0;
  }
}

.user-info {
  .avatar {
    width: 35px;
    height: 35px;
    margin-right: 8px;
  }
  .name {
    font-size: 12px;
    color: #333333;
  }
  .pubdate {
    font-size: 11px;
    color: #b4b4b4;
  }
  .follow-btn {
    width: 85px;
    height: 29px;
  }
}

ul {
  list-style: unset;
}

.markdown-body {
  padding: 14px;
  background-color: #fff;
}

.article-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
  height: 44px;
  border-top: 1px solid #d8d8d8;
  background-color: #fff;
  .comment-btn {
    width: 141px;
    height: 23px;
    border: 1px solid #eeeeee;
    font-size: 15px;
    line-height: 23px;
    color: #a7a7a7;
  }
  .van-icon {
    font-size: 20px;
    .van-info {
      font-size: 11px;
      background-color: #e22829;
    }
  }
}
.comment-item {
  .avatar {
    width: 36px;
    height: 36px;
    margin-right: 13px;
  }
  .name {
    font-size: 16px;
    color: #555;
  }
  .content {
    font-size: 16px;
    color: #222222;
    margin: 10px 0;
  }
  .info {
    display: flex;
    height: 36px;
    align-items: center;
  }
  .pubdate {
    font-size: 12px;
    margin-right: 12px;
  }
  .title-w {
    display: flex;
    justify-content: space-between;
    height: 36px;
    align-items: center;
  }
  .like-w {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .like-icon.liked {
    color: #ef092c;
  }
}

.article-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
  height: 44px;
  border-top: 1px solid #d8d8d8;
  background-color: #fff;
  .comment-btn {
    width: 200px;
    height: 30px;
    border: 1px solid #eeeeee;
    font-size: 15px;
    line-height: 23px;
    color: #a7a7a7;
  }
}

.post-comment {
  padding: 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.van-popup {
  h3 {
    margin: 20px 10px;
  }
}
</style>